<template>
    <div class="GuideView">
        <div class="GuideView-down">
            <VanCountDown millisecond :time="time" @finish="onFinish" format="ss:SS" />
        </div>
        <div class="GuideView-circle">
            <VanCircle v-model:current-rate="currentRate" :rate="time" :speed="100 / (time / 1000)" :text="text" />
        </div>
        <VanSwipe class="my-swipe" :show-indicators="false" :autoplay="1000" indicator-color="white">
            <VanSwipeItem class="GuideView-img" v-for="(item, index) in HomeUrl" :key=index>
                <VanImage class="GuideView-img" :src="item" />
            </VanSwipeItem>
        </VanSwipe>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { GetBannerAPI } from '@/views/Home/homeapi'
import { useRouter } from 'vue-router';

import { getweek } from '../../Hooks/getweek';

const { thisweek } = getweek()
const thismoment = new Date()
const week = thisweek(thismoment)
const router = useRouter()
const time = ref(3000)
const currentRate = ref(0);
let HomeUrl = ref([])

const baseurl = 'http://81.69.235.62:3000'

let GetBanner = async () => {
    let res = await GetBannerAPI()
    if (res.status == 200) {
        res.data.result.forEach((item) => {
            let url = item.imgs[0].url.replace('public', baseurl)
            HomeUrl.value.push(url)
            console.log(HomeUrl.value);
        })
    }
}

const text = computed(() => {
    return currentRate.value.toFixed(1) + '%'
});

const onFinish = () => {
    router.push('/home')

}


onMounted(() => {
    GetBanner()
    localStorage.setItem('week', week)
})
</script>

<style lang="scss" scoped>
.GuideView {
    width: 100%;
    height: 100%;
    background-color: #999;
    position: relative;

    .GuideView-circle {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .GuideView-down {
        position: absolute;
        top: 20px;
        left: 20px;
    }

    .my-swipe {
        width: 100%;
        height: 100%;

        .GuideView-img {
            width: 100%;
            height: 80%;
            margin-top: 6%;
        }
    }

}
</style>